Fitts's Law and Its Applications in UX菲茨定律及其在使用者體驗中的應用

菲茨定律(Fitts's Law)指出,到達目標所需的時間取決於目標的大小和與目標的距離。這一規律對人機互動和UX設計有重要啟示。

菲茨定律的歷史背景

保羅·菲茨(Paul Fitts)

菲茨定律的核心內容

菲茨定律公式描述了指標(如滑鼠、手指或手)的移動時間與目標的大小和距離之間的關係:

公式的直觀含義:

  1. 距離越遠,時間越長:更近的目標更容易獲取。
  1. 目標越大,時間越短:更大的目標更容易點選或觸碰。

兩階段運動模型

背景

關鍵點

菲茨定律在UX設計中的應用

菲茨定律指出,到達目標 A 所需的時間比到達其他任何目標所需的時間都短。儘管目標 A 和目標 B 大小相同,但從遊標到 A 的距離(D1)比到 B 的距離(D2)短,因此向 A 的移動會更快。目標 C 與目標 A 距遊標距離相同(D1),但它更小,因此將遊標移動到目標 C 所需的時間比移動到目標 A 所需的時間長。

大目標更好:較大的目標減少錯誤率,提高點選速度。新增標籤(如文字描述)可以增加目標面積,使其更易點選。

螢幕邊緣的無限目標:在滑鼠驅動介面中,螢幕邊緣目標的實際大小是無限的(如MacOS的頂部選單)。使用者無需擔心“越界”,因此可快速到達目標。

在 MacOS 中,應用程式選單位於螢幕的頂部邊緣,該邊緣充當無限邊緣。這種放置方式最佳化了到達這個經常訪問區域的移動時間,因為選單中的選項成為無限目標,使用者無需減速就能準確點選它們。
透過將工作列放在螢幕底部,Windows利用了螢幕邊緣的自然限制,設計出了高效且符合使用者習慣的介面。這種設計減少了滑鼠操作中的誤差,提高了使用者的互動效率。

避免目標過於密集:若目標過於靠近,使用者可能誤觸錯誤目標。適當增加目標間距以提高可用性。

帶襯墊的目標通常是一個小目標,其周圍有一個較大的不可見活動區域。如果人們沒有意識到目標是帶襯墊的,他們在接近目標時仍會減速,以確保擊中可見區域。

最佳化目標距離

選單設計:

  • 線性選單:將最常用選項置於靠近選單手柄的位置。
  • 矩形選單:透過多方向排列選項降低平均距離。
  • 餅圖選單:所有選項距選單手柄等距,但因使用者不熟悉此設計,應用較少。
從選單手柄到選單元素的平均距離取決於選單的型別:線性選單的效率低於矩形選單,而矩形選單的效率又低於餅狀選單。

按鈕佈局:

  • 將相關按鈕靠近佈局,如提交按鈕應與表單最後一項相鄰。
  • 避免將按鈕放置在頂部遠離使用者操作流程的位置。
在直線選單中,透過將手柄與選單中間對齊,可以提高平均移動時間。
Gmail for iOS 將與上下文省略號選單相關的選項放置在底部工作表中,遠離選單手柄。要選擇選單選項,使用者必須將手指從選單手柄移動到選單選項相對較長的距離。
在直線選單中,透過將手柄與選單中間對齊,可以提高平均移動時間。

例項解析

MacOS與Windows的邊緣最佳化:

  • MacOS將應用選單放置在頂部邊緣,最佳化了訪問時間。
  • Windows將工作列置於底部邊緣,同樣利用了無限目標的特性。
Gmail for iOS 將與上下文省略號選單相關的選項放置在底部工作表中,遠離選單手柄。要選擇選單選項,使用者必須將手指從選單手柄移動到選單選項相對較長的距離。
在 iOS 版的郵件中,與刪除圖示相關的上下文選單會緊挨著該圖示出現,從而將移動時間降至最低。

移動端的表單按鈕設計:

  • 不良示例:將儲存按鈕放置在頁面頂部,增加了使用者的移動時間。
  • 良好示例:將主要操作按鈕放置在表單底部,靠近使用者的最後輸入位置。
絲芙蘭 iPhone 應用將儲存按鈕放置在螢幕的右上角。使用者的手指需要從表單的最後一個欄位移動相對較長的距離才能到達儲存按鈕。
相比之下,丹麥的計程車應用程式 Taxa 4x35 將主要操作呼籲置於表單的最底部,靠近最後一個表單欄位。

菲茨定律為UX設計提供了關鍵指導:

  1. 增大目標尺寸以提高點選效率。
  1. 將目標放置在距離使用者上一步操作最近的位置。
    透過結合菲茨定律和兩階段運動模型,設計師可以最佳化使用者介面,使互動更加高效直觀。